import React, { useEffect, useState } from "react";
import { DateTimeRange } from "@ct0/ui";
import moment from "moment";

export default function DateTimeRangePanel() {
  const [value, setValue] = useState([1635843175751, 1639471975751]);
  const onChange = (val) => setValue(val);
  return (
    <div>
      <h2>DateTimeRange 时间范围选择器</h2>
      <h2>代码演示</h2>
      <div>
        <ul>
          <li key="basic">调用示例</li>
        </ul>
        <div>
          <DateTimeRange
            onChange={onChange}
            value={value}
            label="测试时间范围"
          />
        </div>
        <ul>
          <li key="basic">禁用时间选择</li>
        </ul>
        <div>
          <DateTimeRange
            onChange={onChange}
            value={value}
            disabledTime={true}
          />
        </div>
        <ul>
          <li key="basic">禁用状态</li>
        </ul>
        <div>
          <DateTimeRange onChange={onChange} value={value} disabled={true} />
        </div>
        <div style={{ paddingTop: "10px", fontSize: "12px" }}>
          当前输出为: {JSON.stringify(value)},
          {value && (
            <span>
              即：{" "}
              {JSON.stringify([
                moment(value[0]).format("YYYY-MM-DD HH:mm:ss"),
                moment(value[1]).format("YYYY-MM-DD HH:mm:ss"),
              ])}
            </span>
          )}
        </div>
        <div className="code" style={{ marginTop: "10px" }}>
          <pre>
            <code className="language-jsx">
              {`import { DateTimeRange } from '@ct0/ui'`}
              {"\n"}
              {`const onChange = (newValue: [number, number] | null) => { 'update time range to newValue' }`}
              {"\n"}
              {`ReactDOM.render(`}
              {"\n"}
              {`<DateTimeRange onChange={onChange} value={null} />`},mountNode)
            </code>
          </pre>
        </div>
      </div>
      <h2>API</h2>
      <table border="1" width="60%">
        <thead>
          <tr>
            <th>参数</th>
            <th>说明</th>
            <th>类型</th>
            <th>默认值</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>value</td>
            <td>当前的时间范围(必填)</td>
            <td>[number, number] | null(number为13位长的时间戳)</td>
            <td>-</td>
          </tr>
          <tr>
            <td>onChange</td>
            <td>value改变函数(选填)</td>
            <td>function(value: [number, number] | null)</td>
            <td>-</td>
          </tr>
          <tr>
            <td>disabled</td>
            <td>禁用(选填)</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>disabledTime</td>
            <td>禁用时间选择器(选填)</td>
            <td>boolean</td>
            <td>false</td>
          </tr>
          <tr>
            <td>label</td>
            <td>前缀名称(选填)</td>
            <td>string</td>
            <td>时间范围</td>
          </tr>
        </tbody>
      </table>
    </div>
  );
}
